<template>
  <div class="food-drop-down" ref="foodDropDown">
    <div class="cart" v-show="showIndex === 0">
      <div class="left">
        <div
          v-for="(item, index) in sortContainer"
          :key="index"
          class="cart-container"
        >
          <div
            class="item"
            @click="handleCartBtn(index)"
            :class="{ active: currentIndex === index }"
          >
            <div>
              <img
                :src="item.image_url | splitImgUrl"
                alt=""
                v-if="item.id !== 260"
                class="image"
              />
              <span>{{ item.name }}</span>
            </div>
            <span class="count">{{ item.count }}</span>
          </div>
        </div>
      </div>
      <ul class="right" v-if="Object.values(subCategories).length !== 0">
        <li
          v-for="(number, index) in subCategories.length - 1"
          :key="index"
          @click="handleSortDetailBtn(index, subCategories[number])"
        >
          <div class="detail" :class="{ textColor: cartIndex === index }">
            <span> {{ subCategories[number].name }}</span>
            <span> {{ subCategories[number].count }}</span>
          </div>
        </li>
      </ul>
    </div>
    <ul class="sort" v-show="showIndex === 1">
      <li
        v-for="(item, index) in sortTag"
        :key="index"
        class="sort-li"
        @click="handleSortBtn(index, item.id)"
        :class="{ 'sort-arrow': sortIndex === index }"
      >
        <svg class="svg" width="20" height="100%">
          <use xlink:href="#sort" v-if="index === 0" />
          <use xlink:href="#address" v-else-if="index === 1" />
          <use xlink:href="#fire" v-else-if="index === 2" />
          <use xlink:href="#start-send" v-else-if="index === 3" />
          <use xlink:href="#distribution" v-else-if="index === 4" />
          <use xlink:href="#star" v-else />
        </svg>
        <span class="sort-item">
          {{ item.name }}
        </span>
      </li>
    </ul>
    <div class="screen" v-show="showIndex === 2">
      <div
        class="distribution"
        v-if="Object.values(deliveryModes).length !== 0"
      >
        <span class="distribution-title">配送方式</span>
        <div class="mode" @click="handledistributionbtn(deliveryModes[0].id)">
          <svg
            id="fengniao"
            width="30"
            height="30"
            v-show="!activityAttributeIds[0].status"
          >
            <use xlink:href="#hummingbird" />
          </svg>
          <span
            class="mark"
            v-show="activityAttributeIds[0].status"
          ></span>
          <span class="text">
            {{ deliveryModes[0].text }}
          </span>
        </div>
      </div>
      <div class="merchant-attribute">
        <span class="merchant-attribute-title">商家属性（可以多选）</span>
        <ul
          ref="ul"
          v-if="
            Object.values(activityAttributeIds).length ===
            activityAttributes.length + 1
          "
        >
          <li
            v-for="(item, index) in activityAttributes"
            @click="handleMerchantAttributeBtn(index, item.id)"
            :key="index"
          >
            <span
              class="icon-name"
              :style="{
                color: `#${item.icon_color}`,
                border: `2px solid #${item.icon_color}`,
              }"
              v-show="!activityAttributeIds[index + 1].status"
            >
              {{ item.icon_name }}
            </span>
            <span
              class="mark"
              v-show="activityAttributeIds[index + 1].status"
            >
            </span>
            <span class="name">
              {{ item.name }}
            </span>
          </li>
        </ul>
      </div>
      <div class="footer-button">
        <div class="empty" @click="handleClearBtn">清空</div>
        <div class="ascertain" @click="handleDetermineBtn">
          确定{{ selectProperties }}
        </div>
      </div>
    </div>
    <div class="mask"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 1,
      subCategories: [],
      cartIndex: 0,
      sortIndex: -1,
      showIndex: -1,
      sortTag: [
        { id: 0, name: "智能排序" },
        { id: 5, name: "距离最近" },
        { id: 6, name: "销量最高" },
        { id: 1, name: "起送价最低" },
        { id: 2, name: "配送速度最快" },
        { id: 3, name: "评分最高" },
      ],
      switchShow: true,
      merchantAttributeIndex: -1,
      activityAttributeIds: [],
    };
  },
  props: {
    sortContainer: {
      type: Array,
      default() {
        return [];
      },
    },
    deliveryModes: {
      type: Array,
      default() {
        return [];
      },
    },
    activityAttributes: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    selectProperties() {
      const length = this.activityAttributeIds.filter((item) => item.status)
        .length;
      return !length
        ? ""
        : `（${
            this.activityAttributeIds.filter((item) => item.status).length
          }）`;
    },
  },
  watch: {
    sortContainer() {
      this.subCategories = this.sortContainer[1].sub_categories;
    },
    deliveryModes() {
      this.activityAttributeIds.unshift({
        id: this.deliveryModes[0].id,
        status: false,
      });
    },
    activityAttributes() {
      this.activityAttributes.forEach((item) => {
        this.activityAttributeIds.push({
          id: item.id,
          status: false,
        });
      });
    },
  },
  mounted() {
    this.$bus.$on("handleMainSortBtn", (index) => {
      this.showIndex = index;
      this.$refs.foodDropDown.style.display = index === -1 ? "none" : "block";
    });
  },
  filters: {
    splitImgUrl(value) {
      if (!value) {
        return "http://elm.cangdu.org/img/default.jpg";
      }
      const params = [];
      params[0] = value.substr(0, 1);
      params[1] = value.substr(1, 2);
      params[2] = value.substr(3);
      params[3] = value.includes("png") ? "png" : "jpeg";
      return `https://fuss10.elemecdn.com/${params[0]}/${params[1]}/${params[2]}.${params[3]}`;
    },
  },
  methods: {
    handleCartBtn(index) {
      if (index === 0) return true;
      this.currentIndex = index;
      this.subCategories = this.sortContainer[index].sub_categories;
      this.cartIndex = 0;
    },
    dealingWithpublicParts(fatherSonTransmission, noFatherSonTransmission) {
      this.$emit(fatherSonTransmission.name, fatherSonTransmission.params);
      this.$refs.foodDropDown.style.display = "none";
      this.$bus.$emit(
        noFatherSonTransmission.name,
        false,
        noFatherSonTransmission.params
      );
    },
    handleSortDetailBtn(index, data) {
      this.cartIndex = index;
      this.dealingWithpublicParts(
        {
          name: "handleSortDetailBtn",
          params: data.id,
        },
        {
          name: "handleSortDetailBtn",
          params: data.name,
        }
      );
    },
    handleSortBtn(index, oderBy) {
      this.sortIndex = index;
      this.dealingWithpublicParts(
        {
          name: "handleSortBtn",
          params: oderBy,
        },
        {
          name: "handleSortBtn",
        }
      );
    },
    handleDetermineBtn() {
      const selctTag = [];
      for (const value of this.activityAttributeIds) {
        if (value.status) {
          selctTag.push(value.id);
        }
      }
      this.dealingWithpublicParts(
        {
          name: "handleDetermineBtn",
          params: selctTag,
        },
        {
          name: "handleDetermineBtn",
        }
      );
    },
    handledistributionbtn(id) {
      for (const value of this.activityAttributeIds) {
        if (id === value.id) {
          value.status = !value.status;
        }
      }
    },
    handleMerchantAttributeBtn(index, id) {
      for (const value of this.activityAttributeIds) {
        if (id === value.id) {
          value.status = !value.status;
        }
      }
    },
    handleClearBtn() {
      this.activityAttributeIds.map((item) => {
        item.status = false;
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import url("assets/css/mixin");
.food-drop-down {
  display: none;
  position: absolute;
  top: 82px;
  left: 0;
  right: 0;
  bottom: 193px;
  color: #666666;
  font-size: 12px;
  z-index: 1;
  .cart {
    display: flex;
    height: 100%;
    background-color: #fff;
    .left,
    .right {
      width: 50%;
    }
    .left {
      background-color: #f1f1f1;
      .cart-container {
        .item {
          position: relative;
          padding: 13px 20px;
          .set-flex();
          .image {
            width: 18px;
            margin-right: 6px;
            vertical-align: middle;
          }
          .count {
            padding: 1px 3px;
            border-radius: 5px;
            background-color: #cccccc;
            color: #fff;
            font-size: 10px;
            &::after {
              content: "";
              position: absolute;
              top: 41%;
              right: 10px;
              width: 6px;
              height: 6px;
              border-top: 2px solid #cccccc;
              border-left: 2px solid #cccccc;
              transform: rotate(135deg);
            }
          }
        }
        .active {
          background-color: #fff;
        }
      }
      & .sort-container:nth-child(1) .item .count {
        margin-right: -10px;
      }
    }
    .right {
      height: 100%;
      background-color: #fff;
      overflow: scroll;
      li {
        padding: 0 20px;
        .textColor {
          color: #3190e8;
        }
        .detail {
          .set-flex();
          width: 100%;
          border-bottom: 1px solid #a8d2fa;
          padding-bottom: 14px;
          padding-top: 15px;
        }
      }
    }
  }
  .sort {
    padding-left: 40px;
    background-color: #fff;
    .sort-li {
      display: flex;
      position: relative;
      height: 59px;
      line-height: 59px;
      .svg {
        margin-left: -20px;
      }
      .sort-item {
        width: 100%;
        margin-left: 15px;
        border-bottom: 1px solid #cccccc;
      }
    }
    .sort-arrow {
      color: #3190e8;
      &::after {
        content: "";
        position: absolute;
        top: 18px;
        right: 20px;
        width: 8px;
        height: 15px;
        border-top: 2px solid #3190e8;
        border-left: 2px solid #3190e8;
        transform: rotate(225deg);
      }
    }
  }
  .screen {
    background-color: #f1f1f1;
    color: #7b7b7b;
    font-size: 10px;
    .distribution,
    .merchant-attribute {
      .mark {
        position: absolute;
        top: 3px;
        left: 14px;
        width: 8px;
        height: 15px;
        border-top: 2px solid #3190e8;
        border-left: 2px solid #3190e8;
        transform: rotate(225deg);
      }
    }
    .distribution {
      padding: 10px;
      border-bottom: 1px solid #f5f2f2;
      background-color: #fff;
      .distribution-title {
        display: block;
        margin-bottom: 10px;
      }
      .mode {
        position: relative;
        display: inline-block;
        width: 31%;
        padding: 8px 0;
        border: 1px solid #eaeaea;
        border-radius: 5px;
        #fengniao {
          position: absolute;
          top: 50%;
          left: 8px;
          transform: translateY(-50%);
        }
        .text {
          margin-left: 37px;
        }
      }
    }
    .merchant-attribute {
      padding: 0 10px;
      background-color: #fff;
      .merchant-attribute-title {
        display: block;
        padding: 10px 0;
      }
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          position: relative;
          width: 31%;
          padding: 8px;
          border: 1px solid #eaeaea;
          border-radius: 5px;
          margin-bottom: 5px;
          margin-right: 5px;
          color: #666666;
          .icon-name {
            position: absolute;
            top: 3px;
            padding: 2px;
            border-radius: 5px;
            font-weight: bold;
          }
          .name {
            margin-left: 30px;
          }
        }
      }
    }
  }
  .footer-button {
    display: flex;
    justify-content: space-evenly;
    padding: 10px 0;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    .empty,
    .ascertain {
      display: inline-block;
      width: 47%;
      padding: 12px 30px;
      border-radius: 10px;
    }
    .empty {
      background-color: #fff;
      color: #333333;
    }
    .ascertain {
      background-color: #56d176;
      color: #fff;
    }
  }
  .mask {
    width: 100vw;
    height: 100vh;
    background-color: #222222;
    opacity: 0.6;
  }
}
</style>
